/*
 * MinIO Cloud Storage (C) 2016, 2018 MinIO, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from "react"
import axios from "axios"
import { connect } from "react-redux"
import Alert from "../alert/Alert"
import * as actionsAlert from "../alert/actions"
import web from "../web"
import { Redirect, Link } from "react-router-dom"
import storage from 'local-storage-fallback'
import history from "../history"

export class FileProfileDetail extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      table: [],
      // encryptkey: "",
    }
  }

  toFilelist() {
    history.replace("/FileList")
  }

  
  componentDidUpdate() {
    console.log(window.location.pathname.indexOf('Profile'))
    if(window.location.pathname.indexOf('Profile') == -1 ){
      clearInterval(profileInterval)
    }
  }
  

  componentDidMount() {
    axios({
      method: 'post',
      url: "http://"+window.location.hostname+":1323/profile",
      headers: {'Content-Type': 'application/json','Access-Control-Allow-Origin':'*'},
      data: {
        logfilepath: storage.getItem("logfilepath"),
        uid: '',
        gid: '',
        pid: '',
        interval: '2'
      }
    })
    .then(
      (response)=>{
        this.setState({
          table: response.data
        })
        console.log(this.state.table)
      })
    .catch(
      (error)=>{
        console.log(error)
      }
    )
    const { showAlert, clearAlert, history } = this.props
    let message = ""
    var profileInterval = setInterval(() => {
      if(document.getElementById("profilePage") === null) {
        clearInterval(profileInterval);
        return;
      }
      axios({
        method: 'post',
        url: "http://"+window.location.hostname+":1323/profile",
        headers: {'Content-Type': 'application/json','Access-Control-Allow-Origin':'*'},
        data: {
        logfilepath: storage.getItem("logfilepath"),
        uid: '',
        gid: '',
        pid: '',
        interval: '2'
      }
    })
    .then(
      (response)=>{
        this.setState({
          table: response.data
        })
        console.log(this.state.table)
        const listItems = this.state.table.map((data)=>
          <tr>
            <td>{data.operation}</td>
            <td>{data.count}</td>
            <td>{data.average}</td>
            <td>{data.total}</td>
            <td>{data.percent*100}%</td>
          </tr>
        )
      })
    .catch(
      (error)=>{
        console.log(error)
        clearInterval(profileInterval);
      }
    )
    },50000)

  }
  
  componentWillUnmount() {
    document.body.classList.remove("is-guest")
  } 


  render() {
    const { clearAlert, alert } = this.props
    let alertBox = <Alert {...alert} onDismiss={clearAlert} />
    if (!alert.message) alertBox = ""
    return (
      <div className="file-form" id="profilePage">
        {alertBox}
        
        <div className="file-wrap">
          <div className="step-banner">
            <div className="step-title">
              <div className="step-title-icon">
                <i className="fa fa-info-circle" />
              </div>
              <div className="step-title-content">
                <h3>文件系统配置信息</h3>
                <p>用户挂载后的文件系统配置信息，在这里您可以看到配置信息的实时数据。</p>
              </div>
            </div>
          </div>
          <div className="step-form">
            <table>
              <thead>
                <tr>
                  <th>Operation</th>
                  <th>Count</th>
                  <th>Average(us)</th>
                  <th>Total(us)</th>
                  <th>Percent(%)</th>
                </tr>
              </thead>
              <tbody>
                {/* {listItems} */}
              {this.state.table.map((data)=>
                <tr>
                  <td>{data.operation}</td>
                  <td>{data.count}</td>
                  <td>{data.average}</td>
                  <td>{data.total}</td>
                  <td>{((data.percent)*100).toFixed(2)}%</td>
                </tr>
              )}
                <tr>
                  <td colspan="5">
                    <div className="step-btn">
                      <button className="step-next" onClick={this.toFilelist}>
                        返回系统信息
                      </button>  
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
          
      </div>
    )
  }
}

const mapDispatchToProps = dispatch => {
  return {
    showAlert: (type, message) =>
      dispatch(actionsAlert.set({ type: type, message: message })),
    clearAlert: () => dispatch(actionsAlert.clear())
  }
}

export default connect(
  state => state,
  mapDispatchToProps
)(FileProfileDetail)
